<script setup>
import { ElTooltip,ElMessage } from 'element-plus';
import { ref, nextTick } from 'vue';
import { useAiSettingStore } from '@/stores/aiSetting';
const store = useAiSettingStore();
const emit = defineEmits(['sendMessage']);
const messageText = ref('');
const files = ref([]);
const haveVIP = ref(true);
const useDeep = ref(store.useDeep);
const isloading = ref(false);
const fileInput = ref(null);
const triggerFileInput = () => {
  fileInput.value.click()
}

const handleFileChange = (event) => {
  const selectedFiles = Array.from(event.target.files);

  if (files.value.length + selectedFiles.length > 3) {
    ElMessage.error('最多只能上传3个文件');
    event.target.value = '';
    return;
  }

  const invalidFiles = selectedFiles.filter(file => 
    !file.name.endsWith('.docx')
  );

  if (invalidFiles.length > 0) {
    ElMessage.error('只能上传.docx格式的文件');
    event.target.value = '';
    return;
  }

  files.value = [...files.value, ...selectedFiles.map(file => ({
    name: file.name,
    file: file
  }))];

  event.target.value = '';
};

const removeFile = (index) => {
  files.value.splice(index, 1);
};

const props = defineProps(['chatId']);

const sendMessage = () => {
  if (messageText.value.trim() || files.value.length) {
    const newMessage = {
      id: `msg-${Date.now()}`,
      role: 'user',
      content: messageText.value.trim(),
      deep: store.useDeep,
      files: [...files.value],
      chatId: props.chatId // 添加会话ID
    };
    // 调用接口把信息发送给后端
    emit('sendMessage', newMessage)
    isloading.value = true
    setTimeout(() => {
      isloading.value = false;
    }, 2000);
    messageText.value = ''
    files.value = []
    nextTick(() => {
      const textarea = document.querySelector('.text-input');
      if (textarea) {
        textarea.style.height = '46px';
        textarea.style.overflowY = 'hidden';
      }
    });
  }
};

const adjustTextareaHeight = (event) => {
  const textarea = event.target;
  textarea.style.height = 'auto';
  const newHeight = Math.min(textarea.scrollHeight, 150);
  textarea.style.overflowY = newHeight >= 150 ? 'auto' : 'hidden';
  textarea.style.height = newHeight + 'px';
};

// Enter 键处理
const handleKeyDown = (event) => {
  // Alt + Enter 换行
  if (event.key === 'Enter' && event.altKey) {
    // 插入换行符
    messageText.value += '\n';
    adjustTextareaHeight(event);
    event.preventDefault();
  }
  // Enter 发送消息
  else if (event.key === 'Enter' && !event.shiftKey && !event.altKey) {
    event.preventDefault();
    sendMessage();
  }
};

const toggleDeep = () => {
  useDeep.value = !useDeep.value;
  store.toggleDeep(useDeep.value);
};
</script>

<template>
  <div class="input-container">
    <input ref="fileInput" type="file" multiple accept=".docx" style="display: none" @change="handleFileChange">
    <div v-if="files.length" class="file-preview">
      <div v-for="(file, index) in files" :key="index" class="preview-item">
        <i class="fas fa-file-word"></i> {{ file.name }}
        <i class="fas fa-times" @click="removeFile(index)"></i>
      </div>
    </div>

    <div class="input-area">
<!--      <button class="action-button secondary" v-if="haveVIP" :class="{ actived: useDeep }" @click="toggleDeep">-->
<!--        <el-tooltip content="深度思考" placement="top">-->
<!--          <i class="fas fa-brain"></i>-->
<!--        </el-tooltip>-->
<!--      </button>-->
      <textarea v-model="messageText" class="text-input" placeholder="输入您的问题..." rows="1" @input="adjustTextareaHeight"
        @keydown="handleKeyDown"></textarea>
      <button class="action-button secondary" @click="triggerFileInput">
        <ElTooltip content="添加文件(.docx * 3)" placement="top">
          <i class="fas fa-paperclip"></i>
        </ElTooltip>
      </button>
      <button v-if="!isloading" class="action-button primary" @click="sendMessage" :disabled="!messageText">
        <el-tooltip content="发送" placement="top">
          <i class="fas fa-paper-plane"></i>
        </el-tooltip>
      </button>
      <button v-else class="action-button primary">
        <el-tooltip content="思考中，请稍候" placement="top">
          <i class="fas fa-spinner fa-spin"></i>
        </el-tooltip>
      </button>
    </div>
  </div>
</template>

<style scoped>
.text-input {
  min-height: 46px;
  flex: 1;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  resize: none;
  outline: none;
  max-height: 150px;
  transition: border-color 0.3s;
}

.input-container {
  padding: 20px;
  border-top: 1px solid #dee2e6;
  position: relative;
  z-index: 2;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.preview-item {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.preview-item i {
  margin-left: 8px;
  cursor: pointer;
  color: #6c757d;
}

.preview-item i:hover {
  color: #dc3545;
}

.input-area {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.text-input:focus {
  border-color: #4895ef;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}

.action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  height: 46px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.action-button.primary {
  background: linear-gradient(to right, #4361ee, #4895ef);
  color: white;
  box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
}

.action-button.primary:disabled {
  background: rgb(180, 179, 179);
  cursor: not-allowed;
}

.action-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
}

.action-button.secondary {
  background: white;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

.action-button.secondary.actived {
  background-color: #4895ef;
  color: #f8f9fa;
}
</style>